<template>
  <div class="privateFund">
    <!-- 切签功能区 -->
    <div class="topArea">
      <!-- 8大策略title -->
      <div id="tabCon" class="swiper-container tabTopTitle">
        <div class="swiper-wrapper" ref="swiperWrapper">
          <div
            class="swiper-slide subTitle"
            v-if="querySubModelList.length"
            v-for="(item, index) in querySubModelList"
            @click="selectSlideTo(index, item)"
            :class="{ active: currentStrategyIdx == index }"
            :key="index"
            :submodeldesc="item.submodeldesc"
          >
            <span>{{ item.subModelTitle }}</span>
          </div>
        </div>
      </div>
      <!-- 下拉展示区 -->
      <div class="TriangleArea" @click="openTrianglePicker">
        <i class="Ico"></i>
      </div>
      <!--筛选区 -->
      <div class="filterArea" @click="openfilterPicker">
        <i class="Ico"></i>
      </div>
    </div>
    <!--列表 -->

    <div
      class="dataListArea"
      v-if="privateNoNet != 2 && productMarketList.length > 0"
    >
      <!-- mt-loadmore  10条以内数据不下拉 -->
      <list-load-more
        :bottomAllLoaded="canRefresh"
        @loadMore="loadMore"
        @refresh="refresh"
        :emy="isNoData"
        :topDropText="topDropText"
        v-if="!isNoData"
        :isTopLoad="isTopLoad"
      >
        <!-- 数据列表 -->
        <div
          class="listItem"
          v-for="(item, index) in productMarketList"
          :key="index"
          :projectId="item.projectId"
          v-show="productMarketList.length"
        >
          <div class="top">
            <div class="time">颜色：{{ item.interior_trim_color }}</div>
            <div class="markArea">111</div>
          </div>
          <div class="padd3">
            <div class="l_fundName">{{ item.dealer_name }}</div>
            <div class="l_msg">{{ item.vehicle }}</div>
            <div class="l_money_flex">
              <div class="dflex">
                <p class="l_num">{{ item.name }}</p>
                <p class="l_worth">{{ item.paint_color }}</p>
              </div>
              <div class="dflex">
                <p class="l_num">{{ item.emission_standard }}</p>
                <p class="l_worth">{{ item.dealer_name }}</p>
              </div>
              <div class="dflex">
                <div class="dh">{{ item.paint_color }}</div>
                <div class="dhbg"></div>
              </div>
            </div>
          </div>
        </div>
        <!--无更多加载数据  -->
        <div class="noMore" v-show="canRefresh && !noMoreData">
          暂无更多数据
        </div>
        <!--底部公司信息 -->
        <div
          class="tip"
          v-show="
            productMarketList.length < 10 ? true : canRefresh && !noMoreData
          "
        >
          <img :src="tipImg" alt="" />
        </div>
      </list-load-more>
    </div>
    <!-- 加载数据动画 -->
    <div class="dataLoading" v-if="isdataLoading">
      <!-- <img src="../assets/imgs/account/toDoLoading.gif" alt=""> -->
      <p>数据正在加载中，请稍后…</p>
    </div>
    <!-- 空数据 -->
    <no-data v-show="isNoData && privateNoNet == 0"></no-data>

    <!-- 网格请求异常 -->
    <!-- <noNet v-if="privateNoNet == 2" @reLoad="reLoad" index="2"></noNet> -->

    <!-- 策略弹窗 -->
    <!-- height: 10rem -->
    <mt-popup
      v-model="strategyVisible"
      position="bottom"
      class="mint-popup"
      style="width: 100%; height: 6rem"
    >
      <div class="opea trianglePop">
        <div class="cancel" @click.stop="cancel"><i class="closex"></i></div>
        <div class="center">切换类型</div>
      </div>
      <div class="triangleSel swiper-container">
        <div
          class="itemStyle"
          v-for="(item, index) in querySubModelList"
          :class="{ active: currentStrategyIdx == index }"
          :key="index"
          :subModelDesc="item.subModelDesc"
          @click="selectSlideTo(index, item)"
        >
          <span>{{ item.subModelTitle }}</span>
        </div>
      </div>
    </mt-popup>
    <!-- 筛选弹窗 -->
    <mt-popup
      v-model="filterVisible"
      position="bottom"
      class="mint-popup"
      style="width: 100%; height: 10rem"
    >
      <div class="opea filterPop">
        <div class="cancel" @click.stop="cancel"><i class="closex"></i></div>
        <div
          class="filterCenter"
          v-for="(item, index) in filterTab"
          :class="{ active: curfilterTitleIdx == index }"
          @click="filterTabFn(index)"
        >
          {{ item }}
        </div>
      </div>
      <div class="filterSel">
        <div class="w100" v-show="curfilterTitleIdx == 0">
          <!-- filterParamsFn（文本选择索引值，当前对象入参value,高级搜索选值代表(0智能排序/1高级搜索,排序0/起投金额1/封闭期2/风险等级/支持电子合同5)） -->
          <div
            class="itemStyle"
            v-for="(item, index) in orderBy"
            :class="{ active: curOrderBy == index }"
            :key="index"
            @click="filterParamsFn(index, item, 0, 0)"
          >
            <span>{{ item.name }}</span>
          </div>
        </div>
        <div class="w100" v-show="curfilterTitleIdx == 1">
          <div class="lis">
            <div class="title">经销商选择</div>
            <div class="lisCont dealerSel">
              <div
                class="itemStyle"
                v-for="(item, index) in dealerSel"
                :class="{ active: curinvestStartIdx == index }"
                @click="filterParamsFn(index, item, 1, 1)"
              >
                <span>{{ item.dealer_name }}</span>
              </div>
            </div>
          </div>
          <div class="lis">
            <div class="title">车型</div>
            <div class="lisCont dealerSel">
              <div
                class="itemStyle"
                v-for="(item, index) in vehicleList"
                :class="{ active: curProjectTermIdx == index }"
                @click="filterParamsFn(index, item, 1, 2)"
              >
                <span
                  >{{ item.brand }}-{{ item.vehicle }}-{{
                    item.paint_color
                  }}</span
                >
              </div>
            </div>
          </div>
          <div class="lis">
            <div class="title">风险等级</div>
            <div class="lisCont">
              <div
                class="itemStyle"
                v-for="(item, index) in riskLevels"
                :class="{ active: curRiskLevelIdx == index }"
                @click="filterParamsFn(index, item, 1, 3)"
              >
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
          <div class="lis">
            <div class="title">支持电子合同</div>
            <div class="lisCont">
              <div
                class="itemStyle"
                v-for="(item, index) in contractType"
                :class="{ active: curContractIdx == index }"
                @click="filterParamsFn(index, item, 1, 4)"
              >
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btnsArea">
          <div class="btns reset" @click="resetFn">重置</div>
          <div class="btns ok" @click="okFn">确认</div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";
// import MeScroll from 'mescroll.js'
// import noNet from '@/components/assetSearch/noNet.vue';
export default {
  name: "filterData",
  components: {
    // MescrollVue: resolve => require(['@/components/news/mescroll'], resolve),

    listLoadMore: (resolve) => require(["@/components/listLoadMore"], resolve),
    noData: (resolve) =>
      require(["@/components/common/noDataImg.vue"], resolve),
    // noNet,
  },
  data() {
    return {
      productMarketList: "", //私募列表
      bannerImg: require("@/assets/imgs/privateFund/banner.png"),
      sxinImg: require("@/assets/imgs/privateFund/newIco.png"), //上新图
      sqingImg: require("@/assets/imgs/privateFund/emptyIco.png"), //售罄
      planImg: require("@/assets/imgs/privateFund/jx.png"), //资管计划图
      attentionImg: require("@/assets/imgs/privateFund/gz.png"), //关注度
      tipImg: require("@/assets/imgs/privateFund/tips.png"),
      currentStrategyIdx: 0, //当前策略索引
      curfilterTitleIdx: 0, //当前筛选标题索引
      curOrderBy: "-1", //当前排序
      curProjectTermIdx: "-1", //当前封闭期索引
      curinvestStartIdx: "-1", //当前起投金额索引
      curRiskLevelIdx: "-1", //当前风险级别索引
      curContractIdx: "-1", //当前合同类型索引
      //策略
      strategyVisible: false, // 策略开关
      filterVisible: false, // 筛选开关
      clickIndex: 0,
      privateNoNet: 0, // 私募暂无网络
      //策略列表数据
      //策略列表数据
      //策略列表数据
      querySubModelList: [
        {
          id: "190",
          subModelDesc: "",
          subModelTitle: "全部产品",
        },
        {
          id: 195,
          subModelDesc: "36",
          subModelTitle: "宏观策略",
        },
        {
          id: 191,
          subModelDesc: "34",
          subModelTitle: "复合策略",
        },
        {
          id: "193",
          subModelDesc: "9",
          subModelTitle: "市场中性",
        },

        {
          id: "194",
          subModelDesc: "35",
          subModelTitle: "管理期货",
        },
        {
          id: "196",
          subModelDesc: "4",
          subModelTitle: "债券策略",
        },
        {
          id: "197",
          subModelDesc: "37",
          subModelTitle: "组合基金",
        },
        {
          id: "198",
          subModelDesc: "38",
          subModelTitle: "结构化",
        },
      ],
      //筛选tab
      filterTab: ["智能排序", "高级搜索"],
      //智能排序
      orderBy: [
        {
          name: "升序",
          key: 2,
        },
        {
          name: "降序",
          key: 1,
        },
      ],
      // 经销商，为过滤数据
      dealerSel: [
        {
          dealer_id: 109,
          dealer_name: "北京运通博恩汽车销售服务有限公司",
        },
        {
          dealer_id: 112,
          dealer_name: "北京友联威科汽车销售服务有限公司",
        },
        {
          dealer_id: 117,
          dealer_name: "北京德奥达一众汽车销售有限公司",
        },
        {
          dealer_id: 1000,
          dealer_name: "没这个经销商",
        },
      ],

      /*风险级别*/
      riskLevels: [
        {
          name: "保守型",
          key: 1,
        },
        {
          name: "稳健型",
          key: 2,
        },
        {
          name: "平衡型",
          key: 3,
        },
        {
          name: "成长型",
          key: 4,
        },
        {
          name: "进取型",
          key: 5,
        },
      ],
      /*
                合同类型，入参0 - 纸质合同  1 - 电子合同和纸质合同 不传表示全部*/
      contractType: [
        {
          name: "全部",
          key: "",
        },
        {
          name: "是",
          key: "1",
        },
        {
          name: "否",
          key: "0",
        },
      ],
      /*封闭期 */
      vehicleList: [
        {
          brand: "迈腾",
          vehicle: "330TSI 领先型",
          paint_color: "幻影黑",
        },
        {
          brand: "探歌T-ROC",
          vehicle: "280TSI自动舒适型",
          paint_color: "极地白",
        },
        {
          brand: "迈腾",
          vehicle: "330TSI 领先型",
          paint_color: "凯撒金",
        },
      ],
      // 滑动效果
      mySwiper: null,
      swiperWidth: 0,
      maxTranslate: "",
      maxWidth: "",
      slide: {
        offsetLeft: 0,
        clientWidth: 0,
      },
      slideLeft: 0,
      slideWidth: 0,
      slideCenter: 0,
      nowTlanslate: 0,
      pageSwiper: {},

      canRefresh: false, // 是否禁止上拉加载

      paramData: {
        page: 1,
        limit: 10,
        sort: "discount_prize",
        sortStyle: 1,
        province_id: 110000,
        city_id: 110100,
        dealer_id: "",
        brand: "",
        vehicle: "",
        paint_color: "",
        lng: 116.4133837,
        lat: 39.91092455,
      },

      totalPage: "",
      totalCount: "", // 总条数
      mescroll: null,
      isNoData: false, //1000无数据
      isdataLoading: true,
      topDropText: "松开立即刷新",
      noMoreData: false, //  列表的length
      isTopLoad: true, //是否可下拉
    };
  },
  computed: {
    ...mapState(["isAndroid", "isIOS", "isHengtian"]),
  },
  created() {
    this.getSubModelList(); //产品策略
    this.getProductMarket(); //私募列表
  },
  methods: {
    // 三角下拉
    triangleFn() {},
    // 确定、取消按钮逻辑
    cancel(type) {
      this.strategyVisible = false;
      this.filterVisible = false;
    },
    // 策略弹窗显隐
    openTrianglePicker() {
      this.strategyVisible = true;
    },
    // 筛选弹窗显隐
    openfilterPicker() {
      this.filterVisible = true;
    },
    // 切换类型
    selectSlideTo(index, item) {
      let _this = this;
      _this.currentStrategyIdx = index;
      _this.paramData.dealer_id = item.subModelDesc;
      _this.isdataLoading = true;
      _this.canRefresh = false;
      _this.noMoreData = true;
      _this.productMarketList = [];
      _this.paramData.page = 1;
      this.mySwiper.slideTo(index, 1000, false); //切换到第一个slide，速度为1秒
      _this.strategyVisible = false;
      _this.isTopLoad = false;
      _this.isNoData = false;
      _this.getProductMarket();
    },
    // 筛选tab
    filterTabFn(idx) {
      let _this = this;
      _this.curfilterTitleIdx = idx;
    },
    // 筛选入参
    // filterParamsFn（文本选择索引值0开始，当前对象入参value,高级搜索选值代表(0智能排序/1高级搜索,排序0/起投金额1/封闭期2/风险等级/支持电子合同5)）
    filterParamsFn(curItemIndex, item, key, aliasIdx) {
      let _this = this;
      // 高级搜索
      if (key == 1) {
        // 高级搜索选值代表(起投金额1/封闭期2/风险等级/支持电子合同5)
        if (aliasIdx == 1) {
          //经销商
          _this.curinvestStartIdx = curItemIndex;
          _this.paramData.dealer_id = item.dealer_id;
        } else if (aliasIdx == 2) {
          //封闭期
          _this.curProjectTermIdx = curItemIndex;
          _this.paramData.brand = item.brand;
          _this.paramData.vehicle = item.vehicle;
          _this.paramData.paint_color = item.paint_color;
        } else if (aliasIdx == 3) {
          //风险等级
          _this.curRiskLevelIdx = curItemIndex;
          _this.paramData.riskLevels = item.key;
        } else if (aliasIdx == 4) {
          //支持电子合同
          _this.curContractIdx = curItemIndex;
          _this.paramData.contractType = item.key;
        }
      } else {
        _this.curOrderBy = curItemIndex;
        _this.paramData.sortStyle = item.key;
      }
    },
    // 重置
    resetFn() {
      let _this = this;
      let investStrategy = _this.paramData.investStrategy;
      Object.keys(_this.paramData).forEach((key) => {
        _this.paramData[key] = "";
      });
      _this.paramData.page = 1;
      _this.paramData.limit = 10;
      _this.paramData.investDirection = 1;
      _this.paramData.investStrategy = investStrategy;

      _this.curOrderBy = "-1";
      _this.curProjectTermIdx = "-1";
      _this.curinvestStartIdx = "-1";
      _this.curRiskLevelIdx = "-1";
      _this.curContractIdx = "-1";
      console.log(_this.paramData);
    },
    //  确认
    okFn() {
      let _this = this;
      _this.cancel();
      _this.productMarketList = [];
      _this.paramData.page = 1;
      _this.isdataLoading = true;
      //_this.canRefresh = false;
      // _this.noMoreData = true;
      _this.getProductMarket();
    },
    // 产品策略-8
    getSubModelList() {
      let _this = this;
      let params = {
        modelId: "93",
      };
      // this.$axiosHttp.http({
      //     url: this.$httpConfig.querySubModelList_api,
      //     data: params,
      // }, (res) => {
      let res = {
        data: [
          {
            id: 190,
            subModelDesc: "",
            subModelTitle: "全部产品",
          },
          {
            id: 192,
            subModelDesc: "2",
            subModelTitle: "股票策略",
          },
          {
            id: 195,
            subModelDesc: "36",
            subModelTitle: "宏观策略",
          },
          {
            id: 191,
            subModelDesc: "34",
            subModelTitle: "复合策略",
          },
          {
            id: 193,
            subModelDesc: "9",
            subModelTitle: "市场中性",
          },
          {
            id: 194,
            subModelDesc: "35",
            subModelTitle: "管理期货",
          },
          {
            id: 196,
            subModelDesc: "4",
            subModelTitle: "债券策略",
          },
          {
            id: 197,
            subModelDesc: "37",
            subModelTitle: "组合基金",
          },
          {
            id: 198,
            subModelDesc: "38",
            subModelTitle: "结构化",
          },
        ],
      };
      _this.querySubModelList = res.data;
      // }, (res) => {
      //     //504
      // }, (res) => {
      //     // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
      // });
    },
    // 上拉加载
    loadMore(resolve, reject) {
      let _this = this;
      console.log("loadMore.......");
      if (this.paramData.page < _this.totalPage) {
        _this.paramData.page += 1;
        _this.isTopLoad = true;
      }
      this.noMoreData = false;
      _this.canRefresh = false;
      _this.getProductMarket(resolve, reject);
    },
    //下拉刷新
    refresh(resolve, reject) {
      console.log("refresh.........");
      let _this = this;
      _this.paramData.page = 1;
      if (this.paramData.page == 1 && _this.totalPage == 1) {
        _this.isTopLoad = false; //就一条数据禁止下拉
      } else {
        _this.canRefresh = false;
      }
      _this.isNoData = false;

      _this.noMoreData = true;
      _this.getProductMarket(resolve, reject);
    },
    // 私募列表
    getProductMarket(resolve, reject) {
      let _this = this;
      // 因为这个接口是圣承的 ，空数据时 不会返1000，所以要在第一个请求里判断数据，这里只为做分页，不必在意思回调哪个函数
      this.$axiosHttp.http(
        {
          method: "get",
          url: `https://mall.faw-vw.com/index.php/Specialcar/SpecialInfo/specialList?lat=39.91092455&limit=10&lng=116.4133837&province_id=110000&page=${_this.paramData.page}&&sort=${_this.paramData.sort}&sortStyle=1&dealer_id=${_this.paramData.dealer_id}&brand=${_this.paramData.brand}&vehicle=${_this.paramData.vehicle}&paint_color=${_this.paramData.paint_color}`,
          data: _this.paramData,
        },
        (res) => {
          _this.totalCount = res.data.count; // 总条数
          _this.totalPage = Math.ceil(res.data.count / 8);
          if (res.data.list.length) {
            let pageList = res.data.list;
            this.isdataLoading = false;
            _this.isNoData = false;
            _this.privateNoNet = 0;
            // 上拉加载下拉刷新成功回调
            if (resolve) resolve(res.status);
            // 判断是不是第一条
            if (_this.paramData.page == 1) {
              _this.productMarketList = res.data.list;
            } else {
              let dataList = _this.productMarketList.concat(pageList);
              _this.productMarketList = dataList;
              console.log(_this.productMarketList);
              _this.emy = false;
            }

            // 当返回条数少于10条时，则禁止上拉加载
            if (
              _this.totalCount <= 10 &&
              pageList.length <= 10 &&
              pageList.length != 0
            ) {
              _this.canRefresh = true;
              // 数据不够一页时，禁止下拉效果
              _this.isTopLoad = false;
            } else if (_this.totalCount >= 10 && pageList.length > 10) {
              _this.canRefresh = false;
              $(".mint-loadmore-content .mint-loadmore-bottom").css(
                "display",
                "black"
              );
            } else if (_this.totalCount >= 10 && pageList.length < 10) {
              _this.canRefresh = true;
              $(".mint-loadmore-content .mint-loadmore-bottom").css(
                "display",
                "black"
              );
            } else {
              //有分页情况
              _this.isTopLoad = true;
              // _this.noMoreData = true
              _this.canRefresh = false;
              $(".mint-loadmore-content .mint-loadmore-bottom").css(
                "display",
                "black"
              );
            }
            if (_this.productMarketList.length == 0) {
              _this.noMoreData = true;
              _this.canRefresh = true;
            } else {
              _this.noMoreData = false;
            }
            if (
              this.paramData.page >= this.totalPage ||
              this.totalPage == "" ||
              this.totalPage == null
            ) {
              if (this.paramData.page == 1) {
                this.noMoreData = true;
                _this.canRefresh = true;
              } else {
                this.noMoreData = false;
                _this.canRefresh = true;
              }
            }
          } else {
            _this.isNoData = true;
            _this.isdataLoading = false;
          }

          //下边是失败相关的处理
        },
        (res) => {
          if (reject) reject();
          _this.$commonJS.toastI(res.message);
          console.log("存在请求失败的情况");
          _this.productMarketList = [];
          this.noMoreData = true;
          _this.isdataLoading = false;
          _this.privateNoNet = 2;
          _this.isNoData = false;
        },
        (res) => {
          // 这个接口不走这，
          // if (res.data.status == '1000') {
          // _this.isNoData = true;
          // _this.isdataLoading = false;
          // }
          // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
          $(".mint-loadmore-content .mint-loadmore-bottom").css(
            "display",
            "none"
          );
          _this.peocessNoDataShow();
        }
      );
    },
    //处理没有数据时的显示问题
    peocessNoDataShow() {
      if (
        this.paramData.page >= this.totalPage &&
        this.totalPage != "" &&
        this.totalPage != null &&
        this.paramData.page <= this.totalPage
      ) {
        this.noMore = true;
        this.noMoreData = true;
        this.canRefresh = false;
        $(".mint-loadmore-content .mint-loadmore-bottom").css(
          "display",
          "none!important"
        );
      } else {
        if (this.paramData.page == 1) {
          this.isNoData = false;
          this.emy = true;
          // 展示暂无数据样式
          console.log("无数据样式");
          this.productMarketList = [];
          $(".mint-loadmore-content .mint-loadmore-bottom").css(
            "display",
            "none"
          );
          $(".mint-loadmore-content").css("transform", "none");

          this.loadMore = false;
          this.refresh = false;
          this.noMoreData = true;
          this.canRefresh = true;
        } else if (this.paramData.page != 1) {
          // 无数据那就不可以上拉加载了
          this.canRefresh = true;
        }
      }
    },
    reLoad(index) {
      // 私募基金搜索
      this.privateNoNet = 0;
      this.isdataLoading = true;
      this.getSubModelList(); //产品策略
      // this.getBanner() //banner图
      this.getProductMarket(); //私募列表
    },
  },
  mounted() {
    var that = this;
    // 上边联动
    that.mySwiper = new Swiper("#tabCon", {
      freeMode: true,
      freeModeMomentumRatio: 0.5,
      slidesPerView: "auto",
      resistanceRatio: 0.7,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      on: {
        tap: function (swiper) {
          that.swiperWidth = that.$refs.swiperWrapper.clientWidth;
          that.maxTranslate = that.mySwiper.maxTranslate();
          that.maxWidth = -that.maxTranslate + that.swiperWidth / 2;
          console.log(this.clickedIndex);
          that.currentStrategyIdx = this.clickedIndex;
          that.slide = this.slides[this.clickedIndex];
          that.slideLeft = that.slide.offsetLeft;
          that.slideWidth = that.slide.clientWidth;
          that.slideCenter = that.slideLeft + that.slideWidth / 2;
          that.mySwiper.setTransition(300);
          console.log(that.paramData.investStrategy, "当前id...");
          if (that.slideCenter < that.swiperWidth / 2) {
            that.mySwiper.setTranslate(0);
          } else if (that.slideCenter > that.maxWidth) {
            that.mySwiper.setTranslate(that.maxTranslate);
          } else {
            var nowTlanslate = that.slideCenter - that.swiperWidth / 2;
            that.mySwiper.setTranslate(-nowTlanslate);
          }
        },
      },
    });
  },
};
</script>
<style lang="scss" scoped>
.privateFund {
  .topArea {
    width: 100%;
    height: 1rem;
    padding: 0 0.3rem;
    background: rgba(255, 255, 255, 0.94);
    padding-top: 0.2rem;
    border-top: 0.01rem solid #e6e6e6;
    display: flex;
    border-bottom: 0.01rem solid #e6e6e6;

    .tabTopTitle {
      width: 5.73rem;
      margin-left: 0;
      margin-right: 0;
      position: relative;

      &::after {
        content: "";
        width: 0.3rem;
        height: 1rem;
        display: inline-block;
        background: url(../assets/imgs/privateFund/shadowImg.png) no-repeat;
        background-size: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 999;
      }

      .swiper-slide {
        width: auto;
        padding: 0 0.2rem;
        font-size: 0.28rem;
        height: 0.6rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
        line-height: 0.6rem;
        background: #f5f5f5;
        border-radius: 0.08rem;
        margin: 0 0.15rem;

        &.active {
          background: #eef2ff;
          color: #2351ba;
        }

        span {
          transition: all 0.3s ease;
          display: block;
        }

        &:first-child {
          margin-left: 0;
        }
      }
    }

    .TriangleArea {
      padding-top: 0.15rem;
      margin-left: 0.19rem;

      .Ico {
        width: 0.4rem;
        height: 0.4rem;
        display: inline-block;
        background: url(../assets/imgs/privateFund/triangleIco.png) no-repeat;
        background-size: 100%;
      }
    }

    .filterArea {
      padding-top: 0.1rem;
      margin-left: 0.2rem;

      .Ico {
        width: 0.4rem;
        height: 0.4rem;
        display: inline-block;
        background: url(../assets/imgs/privateFund/choiceIco.png) no-repeat;
        background-size: 100%;
      }
    }
  }

  .mint-popup {
    border-radius: 0.28rem 0.28rem 0px 0px;
  }

  .opea {
    display: flex;
    align-items: center;
    height: 1.17rem;
    line-height: 1.17rem;
    border-radius: 28px 28px 0px 0px;
    border-bottom: 0.01rem solid #e6e6e6;

    .cancel {
      padding: 0 0.3rem;
      font-size: 0.3rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;

      .closex {
        width: 0.22rem;
        height: 0.22rem;
        display: inline-block;
        background: url(../assets/imgs/privateFund/closex.png) no-repeat;
        background-size: 100%;
      }
    }

    .center {
      text-align: center;
      flex: 1;
      font-size: 0.36rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      text-indent: -0.4rem;
    }
  }

  .triangleSel {
    width: 100%;
    margin-top: 0.5rem;
    padding-left: 0.3rem;
    display: flex;
    flex-wrap: wrap;

    .itemStyle {
      position: relative;
      width: 2.16rem;
      text-align: center;
      padding: 0 0.48rem;
      font-size: 0.28rem;
      height: 0.72rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 0.72rem;
      background: #f5f5f5;
      border-radius: 0.01rem;
      margin: 0 0.1rem;
      margin-bottom: 0.3rem;

      &:first-child {
        margin-left: 0;
      }

      &:nth-child(3n-2) {
        margin-left: 0;
      }

      &.active {
        background: #eef2ff;
        color: #2351ba;

        &::after {
          content: "";
          width: 0.22rem;
          height: 0.22rem;
          display: inline-block;
          background: url(../assets/imgs/privateFund/activeIco.png) no-repeat;
          background-size: 100%;
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }
    }
  }

  .filterPop {
    .filterCenter {
      position: relative;
      text-align: center;
      flex: 1;
      font-size: 0.36rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      text-indent: -0.4rem;

      &.active {
        color: #2351ba;

        &::after {
          content: "";
          width: 0.96rem;
          height: 0.04rem;
          background: #2351ba;
          border-radius: 0.04rem;
          position: absolute;
          right: 0;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
    }
  }

  .filterSel {
    width: 100%;
    margin-top: 0.5rem;
    padding-left: 0.3rem;

    .w100 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow: auto;
      height: 7rem;
      padding-bottom: 1rem;

      .itemStyle {
        width: 2.1rem;
        text-align: center;
        position: relative;
        font-size: 0.28rem;
        height: 0.72rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 0.72rem;
        background: #f5f5f5;
        border-radius: 0.01rem;
        margin: 0 0.1rem;
        margin-bottom: 0.3rem;

        &.active {
          background: #eef2ff;
          color: #2351ba;

          &::after {
            content: "";
            width: 0.22rem;
            height: 0.22rem;
            display: inline-block;
            background: url(../assets/imgs/privateFund/activeIco.png) no-repeat;
            background-size: 100%;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
      }

      .dealerSel {
        .itemStyle {
          width: initial;
          text-align: left;
          padding-left: 0.2rem;
        }
      }
    }

    .lis {
      width: 100%;
      margin-top: 20rpx;
      color: #33343b;
      font-size: 24rpx;
      font-family: PingFangSC-Medium;
      margin-bottom: 0.1rem;

      .title {
        font-size: 0.3rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 0.42rem;
        margin-bottom: 0.2rem;
      }

      .lisCont {
        width: 100%;
        // display: flex;
        // flex-wrap: wrap;

        .itemStyle {
          margin-left: 0;
          margin-right: 0.3rem;
        }
      }

      &.status {
        .title {
          margin-bottom: 12rpx;
          font-weight: 600;
        }

        .stateList {
          display: flex;
          font-size: 24rpx;
          flex-wrap: wrap;

          .li {
            color: #4e5063;
            padding: 10rpx 32rpx;
            background: #f4f5f6;
            margin: 20rpx;
            margin-top: 0;
            margin-left: 0;

            &.active {
              color: #da2c1f;
              background: #fef5f5;
            }
          }
        }
      }
    }

    .btnsArea {
      display: flex;
      margin-left: auto;
      margin-top: 60rpx;

      .btns {
        width: 3.35rem;
        border-radius: 0.2rem;
        border: 0.02rem solid #d2d2d2;
        font-size: 0.32rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        text-align: center;
        line-height: 0.9rem;

        &.reset {
        }

        &.ok {
          color: #fff;
          background: #2351ba;
          box-shadow: 0px 3px 6px 0px rgba(142, 94, 37, 0.25);

          margin-right: 0.3rem;
          margin-left: auto;
        }
      }
    }
  }

  .bannerImg {
    padding-left: 0.3rem;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;

    .imgs {
      width: 6.9rem;
      height: 1.4rem;
    }
  }

  .dataListArea {
    position: relative;
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    width: 6.9rem;
    //          height: 9rem;
    // border: 1px solid #f00;
    // overflow-y: auto;

    .listItem {
      padding-bottom: 0.3rem;
      box-shadow: 0px 0.04rem 0.14rem -0.01rem rgba(190, 190, 190, 0.32);
      margin-bottom: 0.3rem;
      border-radius: 0.12rem;
      background: #ffffff;
    }

    .top {
      position: relative;
      display: flex;

      .time {
        height: 0.3rem;
        display: inline-block;
        font-size: 0.22rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 0.3rem;
        background: #f2f2f1;
        background-size: 100%;
        border-radius: 0 1rem 1rem 0;
        padding: 0 0.1rem;
        margin-top: 0.14rem;
      }

      .markArea {
        margin-left: auto;
        display: flex;

        img {
          border: 0;
        }

        .goodStatusImgs {
          width: 0.5rem;
          height: 0.6rem;
          display: inline-block;
          margin-right: 0.2rem;
          border: 0;
        }

        .tipMarkImgs {
          width: 1.04rem;
          height: 0.36rem;
          display: inline-block;
          margin-top: -0.05rem;
          border: 0;
        }
      }
    }

    .padd3 {
      padding: 0 0.3rem;

      .l_fundName {
        width: 6.3rem;
        margin-top: 0.3rem;
        font-size: 0.3rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 0.42rem;
      }

      .l_msg {
        margin-top: 0.1rem;
        font-size: 0.24rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 0.24rem;
      }

      .l_money_flex {
        display: flex;
        margin-top: 0.4rem;

        .dflex {
          // flex: 1;
          width: 33%;

          &.width6 {
            width: 66%;
          }

          .l_num {
            font-size: 0.4rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #d95a2b;
            line-height: 0.3rem;
          }

          .l_worth {
            font-size: 0.22rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-top: 0.26rem;
            line-height: 0.22rem;
            white-space: nowrap;
          }

          .dh {
            position: relative;
            text-align: center;
            font-size: 0.4rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
            line-height: 0.4rem;
          }

          .dhbg {
            width: 1.72rem;
            height: 0.35rem;
            display: inline-block;
            background: url(../assets/imgs/privateFund/dhbg.png) no-repeat;
            background-size: 100%;
            margin: 0 auto;
            display: block;
            margin-top: -0.2rem;
          }
        }
      }

      .btm_tip {
        margin-top: 0.4rem;
        width: 6.3rem;
        height: 0.62rem;
        background: #fcf8f1;
        border-radius: 0.12rem;
        line-height: 0.62rem;
        color: #666666;
        font-size: 0.24rem;
        padding-left: 0.2rem;

        .ts {
          width: 0.5rem;
          height: 0.25rem;
          display: inline-block;
          // background: url(../assets/imgs/privateFund/peculiarityIco.png) no-repeat;
          background-size: 100%;
          margin-right: 0.21rem;
        }
      }
    }
  }

  .fize28 {
    font-size: 0.28rem;
  }

  .tip {
    width: 5rem;
    font-size: 0.23rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    text-align: center;
    display: block;
    padding: 0 0 0.4rem 0;
    margin: 0 auto;
    height: 0.22rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    img {
      width: 100%;
      height: 0.22rem;
      background-size: 100%;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
    }
  }
}

.noMore {
  font-size: 0.26rem;
  text-align: center;
  color: #666;
  margin: 0.3rem 0 0.3rem 0;
}

.dataLoading {
  margin-top: 2.7rem;

  img {
    width: 3.9rem;
    height: 1.9rem;
    display: block;
    margin: 0 auto;
  }

  p {
    font-size: 0.24rem;
    text-align: center;
    color: #9aa4bd;
    line-height: 0.24rem;
    margin-top: 0.02rem;
  }
}

.mint-loadmore {
  overflow: hidden;
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
}

.unit {
  font-size: 0.3rem;
  margin-left: 0.2rem;
  color: #999999;
  font-weight: 400;
}
</style>
